<script lang="ts" setup>
import { computed } from "vue"
import { useRoute } from "vue-router"
import { useAppStore } from "@/store/modules/app"
import { usePermissionStore } from "@/store/modules/permission"
import { useSettingsStore } from "@/store/modules/settings"
import SidebarItem from "./SidebarItem.vue"
import Logo from "../Logo/index.vue"
import { useDevice } from "@/hooks/useDevice"
import { useLayoutMode } from "@/hooks/useLayoutMode"
import { getCssVariableValue } from "@/utils"
import logoText1 from "@/assets/layouts/chatLogo.png"

const v3SidebarMenuBgColor = getCssVariableValue("--v3-sidebar-menu-bg-color")
const v3SidebarMenuTextColor = getCssVariableValue("--v3-sidebar-menu-text-color")
const v3SidebarMenuActiveTextColor = getCssVariableValue("--v3-sidebar-menu-active-text-color")

const { isMobile } = useDevice()
const { isLeft, isTop } = useLayoutMode()
const route = useRoute()
const appStore = useAppStore()
const permissionStore = usePermissionStore()
const settingsStore = useSettingsStore()

const activeMenu = computed(() => {
  const {
    meta: { activeMenu },
    path
  } = route
  return activeMenu ? activeMenu : path
})
const noHiddenRoutes = computed(() => permissionStore.routes.filter((item) => !item.meta?.hidden))
const isCollapse = computed(() => !appStore.sidebar.opened)
const isLogo = computed(() => isLeft.value && settingsStore.showLogo)
const backgroundColor = "#fff"
const textColor = computed(() => (isLeft.value ? v3SidebarMenuTextColor : undefined))
const activeTextColor = computed(() => (isLeft.value ? v3SidebarMenuActiveTextColor : undefined))
const sidebarMenuItemHeight = computed(() => {
  return !isTop.value ? "var(--v3-sidebar-menu-item-height)" : "var(--v3-navigationbar-height)"
})
// const sidebarMenuHoverBgColor = computed(() => {
//   return !isTop.value ? "var(--v3-sidebar-menu-hover-bg-color)" : "transparent"
// })
const tipLineWidth = computed(() => {
  return !isTop.value ? "2px" : "0px"
})
// 当为顶部模式时隐藏垂直滚动条
const hiddenScrollbarVerticalBar = computed(() => {
  return isTop.value ? "none" : "block"
})
</script>

<template>
  <div :class="{ 'has-logo': isLogo }" class="sidebar-box">
    <div class="logo-container">
      <img :src="logoText1" class="layout-logo-text sidebar-logo" />
    </div>
    <el-scrollbar wrap-class="scrollbar-wrapper">
      <el-menu
        :default-active="activeMenu"
        :collapse="isCollapse && !isTop"
        :background-color="backgroundColor"
        :text-color="textColor"
        :active-text-color="activeTextColor"
        :unique-opened="true"
        :collapse-transition="false"
        :mode="isTop && !isMobile ? 'horizontal' : 'vertical'"
      >
        <SidebarItem v-for="route in noHiddenRoutes" :key="route.path" :item="route" :base-path="route.path" />
      </el-menu>
    </el-scrollbar>
    <el-tooltip popper-class="my-tool-tip" effect="light" placement="right-end">
      <template #content>
        <div class="tooltip-img-container">
          <img class="tooltip-img" src="../../../assets/layouts/tooltip.png" alt="" />
        </div>
      </template>
      <div class="service">
        <div>
          <SvgIcon class="service-img" name="serviceicon" />
        </div>
        <div class="text">客服</div>
      </div>
    </el-tooltip>
  </div>
</template>

<style lang="scss" scoped>
%tip-line {
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: v-bind(tipLineWidth);
    height: 100%;
    background-color: var(--v3-sidebar-menu-tip-line-bg-color);
  }
}

.has-logo {
  .el-scrollbar {
    // 多 1% 是为了在左侧模式时侧边栏最底部不显示 1px 左右的白色线条
    height: calc(101% - var(--v3-header-height));
  }
}

.el-scrollbar {
  // 多 1% 是为了在顶部模式时防止垂直滚动
  height: 101%;
  :deep(.scrollbar-wrapper) {
    // 限制水平宽度
    overflow-x: hidden !important;
    .el-scrollbar__view {
      height: 100%;
      padding: 0 0px;
    }
  }
  // 滚动条
  :deep(.el-scrollbar__bar) {
    &.is-horizontal {
      // 隐藏水平滚动条
      display: none;
    }
    &.is-vertical {
      // 当为顶部模式时隐藏垂直滚动条
      display: v-bind(hiddenScrollbarVerticalBar);
    }
  }
}

.el-menu {
  border: none;
  min-height: 100%;
  width: 100% !important;
}

.el-menu--horizontal {
  height: v-bind(sidebarMenuItemHeight);
}

:deep(.el-menu-item .el-menu-tooltip__trigger) {
  padding: 0 16px;
}

:deep(.el-menu-item),
:deep(.el-sub-menu__title),
:deep(.el-sub-menu .el-menu-item),
:deep(.el-menu--horizontal .el-menu-item) {
  height: v-bind(sidebarMenuItemHeight);
  line-height: v-bind(sidebarMenuItemHeight);
  border-radius: 8px;
  font-size: 15px;
  margin-bottom: 15px;
  &.is-active,
  &:hover {
    /* background-color: v-bind(sidebarMenuHoverBgColor); */
    background: #fff;
    color: #4d79ff;
  }
}

:deep(.el-sub-menu) {
  &.is-active {
    > .el-sub-menu__title {
      color: v-bind(activeTextColor) !important;
    }
  }
}

:deep(.el-menu-item.is-active) {
  @extend %tip-line;
  &::before {
    width: 0 !important;
  }
}

.el-menu--collapse {
  :deep(.el-sub-menu.is-active) {
    .el-sub-menu__title {
      @extend %tip-line;
    }
  }
}
.logo-container {
  display: flex;
  justify-content: center;
  margin: 30px 0;
  padding-bottom: 20px;
  border-bottom: 1px solid #efefef;
  .sidebar-logo {
    width: 50px;
    height: 50px;
  }
}
.sidebar-box {
  position: relative;
}
.service {
  position: absolute;
  bottom: 65px;
  left: 6px;
  width: 48px;
  height: 43px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  &:hover {
    .text,
    .service-img {
      color: #4d79ff;
    }
  }
  .service-img {
    color: #b0b3c8;
    display: inline-block;
    width: 24px;
    height: 24px;
  }
  .text {
    color: #b0b3c8;
    text-align: center;
    font-family: "PingFang SC";
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }
}
</style>
<style lang="scss">
.my-tool-tip {
  width: 322px !important;
  height: 222px !important;
  border-radius: 10.807px !important;
  // border: 3px solid #fff !important;
  box-shadow: 0px 0px 16px 0px rgba(46, 115, 255, 0.2) !important;
  .tooltip-img-container {
    // padding: 12px !important;
    height: 100%;
    position: relative;
    .tooltip-img {
      position: absolute;
      top: -4px;
      left: -10px;
      display: inline-block !important;
      width: 318px;
      height: 215px;
      z-index: 1000;
    }
  }
}
</style>
